<div id="page-body">
  <div class='row'>
    <p>
      The locale files offer a simple way to globally or individually set the localization options without the need to
      hand code that everytime.
    </p>
  </div>

  <div class='row'>
    <div class='col-sm-6'>
      <label for='datetimepicker1Input' class='form-label'>Simple picker</label>
      <div
        class='input-group'
        id='datetimepicker1'
        data-td-target-input='nearest'
        data-td-target-toggle='nearest'
      >
        <input
          id='datetimepicker1Input'
          type='text'
          class='form-control'
          data-td-target='#datetimepicker1'
        />
        <span
          class='input-group-text'
          data-td-target='#datetimepicker1'
          data-td-toggle='datetimepicker'
        >
               <span class='fas fa-calendar'></span>
             </span>
      </div>
    </div>
  </div>
  <script src='/6/js/locales/ru.js'></script>
  <script type='text/javascript'>
    tempusDominus.loadLocale(tempusDominus.locales.ru);
    tempusDominus.locale(tempusDominus.locales.ru.name);
    const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
  </script>
  <div class='row'>
    <h2 id='creating'>Creating Locales</h2>
    <p>
      There are a few examples in the source like this
    </p>
    <pre>
<code class='language-javascript'>const name = 'ru';

const localization = {
  today: 'Перейти сегодня',
  //...
  locale: 'ru',
  startOfTheWeek: 1
};

export { localization, name };</code>
    </pre>
  </div>

  <div class='row'>
    <h2 id='using'>Using a locale</h2>
    <p>Load the locale file.</p>
    <pre>
<code class='language-html'>&lt;script src=&quot;/path/to/locale.js&quot;&gt;&lt;/script&gt;</code>
    </pre>
    <p>
      You can then either set the global default or you can it individually.
    </p>
    <pre>
<code class='language-js'>//load the RU locale
tempusDominus.loadLocale(tempusDominus.locales.ru);

//globally
tempusDominus.locale(tempusDominus.locales.ru.name);//set the default options to use Russian from the plugin

//picker
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById(&#39;datetimepicker1&#39;));
datetimepicker1.locale(tempusDominus.locales.ru.name);</code>
    </pre>
    <p>
      If you want to load locales in TypeScript:
    </p>
    <pre>
<code class='language-js'>import { TempusDominus, loadLocale, locale } from '@eonasdan/tempus-dominus';

import { localization, name } from "@eonasdan/tempus-dominus/dist/locales/ru";

//load the locale
loadLocale({localization, name});

//set globally
locale(name);

var datetimepicker1 = new TempusDominus(document.getElementById('datetimepicker1'));

//or set per picker
datetimepicker1.locale(name);</code>
    </pre>
  </div>

  <div id='subToc' class='d-none'>
    <nav id='TableOfContents'>
      <ul>
        <li><a href='#content'>Overview</a></li>
        <li><a href='#creating'>Creating</a></li>
        <li><a href='#using'>Using</a></li>
      </ul>
    </nav>
  </div>
</div>

<div id="page-meta">
  <div id="title">Locales</div>
  <div id="post-date">01/19/2022</div>
  <div id="update-date">02/05/2022</div>
  <div id="excerpt">How to use plugins with Tempus Dominus.</div>
  <div id="tags">datepicker, javascript, open source, tempus dominus, eonasdan</div>
</div>
